<template>
  <van-nav-bar left-text="返回" safe-area-inset-top fixed left-arrow @click-left="onClickLeft" id="navbar">
    <template #title>
      <div style="font-weight: 600">{{ $route.query.tit }}</div>
    </template>
  </van-nav-bar>
  <div id="navbarbtm"></div>
  <!-- <Lists :data="jzdata" /> -->
  <div class="h_20">
    <BmLiets :data="jzdata" v-if="type === '已报名'" />
    <BmLiets :data="jzdata" v-else-if="type === '我的收藏'" />
    <ProLiets :data="jzdata" v-else />
  </div>
  <Overlay :show="show" />

</template>

<script>
import $router from "../router/index";
import { Get } from "@/api/axios";
import ProLiets from "../components/Home/ProLiets.vue";
import BmLiets from "../components/Home/BmLiets.vue";
import Overlay from "../components/Home/Overlay.vue";

import { reactive, toRefs, onMounted } from "vue";
export default {
  name: "Projectlist",
  components: {
    ProLiets,
    BmLiets,
    Overlay,
  },
  setup() {
    onMounted(() => {
      const tabbar = document.getElementById("navbar");
      const btm = document.getElementById("navbarbtm");
      setTimeout(() => {
        btm.style.height = tabbar.clientHeight + "px";
      }, 300);
    });
    const jz = reactive({
      show: false,
      jzdata: [],
      type: $router.currentRoute.value.query.tit,
    });
    let type = $router.currentRoute.value.query.tit;

    if (
      type == "已报名" ||
      type == "已录取" ||
      type == "已到岗" ||
      type == "已完成" ||
      type == "我的收藏"
    ) {
      let userinfo = localStorage.getItem("usedata");
      if (!userinfo) {
        $router.push("/login");
      }
    }

    const getjz = async () => {
      const phoneType = localStorage.getItem("phoneType");
      let dtailinfo = {};
      if (phoneType == "iOS") {
        dtailinfo = {
          platform: "ios",
          imei: JSON.stringify({ idfa: localStorage.getItem("idfa") }),
        };
      } else if (phoneType == "Android") {
        dtailinfo = {
          platform: "android",
          imei: localStorage.getItem("imei"),
        };
      }
      jz.show = true;
      const data = await Get({
        url: "index/getWorkList",
        data: { type, ...dtailinfo },
      });
      // console.log(data.data);
      jz.show = false;
      jz.jzdata = data.data.data;
    };

    const getbm = async () => {
      jz.show = true;
      const data = await Get({
        url: "index/entryWorkList",
        data: { type },
        headers: { token: localStorage.getItem("token") },
      });
      jz.show = false;
      // console.log(data.data);
      jz.jzdata = data.data.data;
    };
    const getsc = async () => {
      jz.show = true;
      const data = await Get({
        url: "index/collectList",
        data: { type },
        headers: { token: localStorage.getItem("token") },
      });
      jz.show = false;
      // console.log(data.data);
      jz.jzdata = data.data.data;
    };
    if (type === "已报名") {
      getbm();
    } else if (type === "我的收藏") {
      getsc();
    } else {
      getjz();
    }

    function onClickLeft() {
      $router.go(-1);
    }
    return { onClickLeft, ...toRefs(jz) };
  },
};
</script>

<style lang="scss" scoped>
.h_20 {
  background: white;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
#navbarbtm,
#navbar {
  height: 45px;
}
</style>